<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		#canvas{
			border: #e0e0e0 1px solid;
		}
	</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
window.onload=function () {
  let oC = document.querySelector("#canvas");
  let gd = oC.getContext("2d");

  oC.onmousedown=function (ev) {
    let lastX = ev.offsetX,
        lastY = ev.offsetY;

    oC.onmousemove=function (ev) {
    	gd.beginPath();
	    gd.moveTo(lastX,lastY);

	    gd.lineTo(ev.offsetX,ev.offsetY);
	    gd.stroke();

	    lastX = ev.offsetX,
	    lastY = ev.offsetY;
    }

	oC.onmouseup=function () {
		oC.onmousemove=null;
		oC.onmouseup=null;
	}

  }
}
</script>
</body>
</html>